<template>
	<view>
		<view class="search">
			<view class="input">
				<van-icon size="20" name="search" />
				<input focus v-model="searchValue" type="text" @input="addInputValue"  placeholder="搜索" />
			</view>
			<view class="cancel" @click="addInputValue">取消</view>
		</view>
		<view v-if="searchShow">
			<view class="search-list" v-if="arrHistory.length">
				<view class="search-title flexCss-a">
					<text>历史记录</text>
					<van-icon size="14" name="delete-o" @click="removeHistory" />
				</view>
				<view class="search-sell">
					<view class="sell-item" @click="searchHistory(item)" v-for="(item, i) in arrHistory" :key="i">{{ item }}</view>
				</view>
			</view>
			<view class="search-list">
				<view class="search-title">大家都在搜</view>
				<view class="search-sell"><view class="sell-item" @click="getDetails(item.id)" v-for="item in hotSearch" :key="item.id">{{item.h1}}</view></view>
			</view>
		</view>

		<view v-else class="footer" >
			<view class="footer-list" v-if="seachList.length">
				<view class="footer-item" @click="getDetails(item.id)" v-for="item in seachList" :key="item.id">
					<view class="item-img"><image :src="item.img" mode=""></image></view>
					<view class="item-content">
						<view class="item-a">{{ item.h1 }}</view>
						<view class="item-b van-multi-ellipsis--l3">{{ item.category }}</view>
						<view class="item-c">
							<view class="left">
								<text>{{ item.jg }}</text>
								起起
							</view>
							<view class="right">好评率95%</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="search-null" v-else>
				<image style="width: 400rpx; height: 400rpx; margin-left: 150rpx;" src="https://static.daojia.com/assets/project/wx-index-v2/images/noresult.png" mode=""></image>
				<view style="text-align: center;">
					啊哦，没有搜索到结果
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs, watch } from 'vue'
import { reqGetSearch, reqGetHotSearch } from '@/api/modules/home.js'
import { GetUserInfo } from '@/store/user.js'
const getUserInfo = GetUserInfo()

const state = reactive({
	arrHistory: uni.getStorageSync('SEARCH') || [],
	timer: null,
	searchValue: '',
	seachList: [],
	searchShow: true,
	hotSearch: []
})

// 监听输入框值改变
watch(() => state.searchValue, (n, o) => {
	if(n.length) {
		state.searchShow = false
	}else{
		state.searchShow = true

	}
} )

// 热门搜索
const getHotSearch = async () => {
	const { data } = await reqGetHotSearch()
	state.hotSearch = data.data
	console.log(data.data);
}

// 添加历史记录
const addInputValue = async () => {
	console.log(state.searchValue);
	clearTimeout(state.timer)
	state.timer = setTimeout(async () => {
		const { data } = await reqGetSearch({ h1: state.searchValue })
		state.seachList = data.data.list
		if (!state.searchValue) return
		const index = state.arrHistory.indexOf(state.searchValue)
		if (index !== -1) {
			state.arrHistory.splice(index, 1)
		}
		state.arrHistory.unshift(state.searchValue)
		if (state.arrHistory.length > 10) {
			state.arrHistory.pop()
		}
	}, 500)
	uni.setStorageSync('SEARCH', state.arrHistory)
}

// 历史记录搜索
const searchHistory = (item) => {
	state.searchValue = item
	state.seachList = []
	addInputValue()
}

// 详情
const getDetails = id => {
	getUserInfo.judgeLogin()
	uni.navigateTo({
		url: `/subpkg/details/details?id=${id}`
	})
}

// 删除历史记录
const removeHistory = () => {
	state.arrHistory = []
	uni.removeStorageSync('SEARCH')
}
// 页面加载
onLoad(message => {
	getHotSearch()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { arrHistory, searchValue, seachList,searchShow, hotSearch } = toRefs(state)
</script>

<style lang="scss">
.search {
	display: flex;
	margin-top: 20rpx;
	align-items: center;
	.input {
		width: 75%;
		height: 70rpx;
		display: flex;
		align-items: center;
		background-color: #eff0f1;
		border-radius: 40rpx;
		padding: 0 20rpx;
		input {
			width: 83%;
			padding-left: 10rpx;
		}
	}
	.cancel {
		margin-left: 20rpx;
		color: #e5484a;
	}
}
.search-list {
	margin-top: 30rpx;
	.search-title {
		width: 90%;
		font-size: 28rpx;
		color: #848c99;
	}
	.search-sell {
		width: 98%;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		.sell-item {
			padding: 20rpx;
			margin: 10rpx 10rpx 0 0;
			border-radius: 4rpx;
			background-color: #f2f4f7;
			font-size: 28rpx;
			color: #292d33;
		}
	}
}
.footer {
	// height: 100rpx;
	margin-bottom: 100rpx;
	margin-top: 60rpx;
	.footer-title {
		font-size: 34rpx;
	}
	.footer-list {
		.footer-item {
			display: flex;
			padding: 20rpx 0;
			.item-img {
				image {
					width: 300rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
			.item-content {
				flex: 1;
				margin-left: 30rpx;
				.item-a {
					font-size: 30rpx;
				}
				.item-b {
					font-size: 24rpx;
					margin: 10rpx 0;
					color: #a1a1a1;
					height: 100rpx;
				}
				.item-c {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left {
						font-size: 24rpx;
						color: #dd524f;
						text {
							font-size: 30rpx;
						}
					}
					.right {
						font-size: 24rpx;
						color: #a1a1a1;
					}
				}
			}
		}
	}
}
</style>
